<template>
  <div>
    <div class="card-item" style="height: 440px;">
      <p class="card-title">进场客流分析</p>
      <div class="card-div">
        <div class="trip-title">{{scenicName}}</div>
        <common-dualarea-chart style="padding-top:45px;box-sizing:border-box;" ref="tripMode" :config="tripModeConfig">
        </common-dualarea-chart>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">省内游客消费分析</p>
      <div class="card-div">
        <in-province></in-province>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">外省游客消费分析</p>
      <div class="card-div">
        <out-of-province></out-of-province>
      </div>
    </div>

    
  </div>
</template>

<script>
  import InProvince from '@/views/humanistic-tourism/tourist-consumption/in-province.vue';
  import OutOfProvince from '@/views/humanistic-tourism/tourist-consumption/out-of-province.vue';
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonDualareaChart from '@/components/common/common-dualarea-chart.vue';
  export default {
    components: {
      InProvince,
      OutOfProvince,
      CommonDualareaChart,
      CommonPieNewChart
    },
    data() {
      return {
        startDate:'',
        endDate:'',
        scenicName:'',
        interval: null,
        tripModeConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'tripModePie',
            title: '',
            xRotate:45,
            x: [],
            y: [{
              axis: {
                min: null,
                max: null,
                name: '(人)',
                offset: -20
              },
              title: '人',
              data: [],
              startColor: '#77F7E7',
              endColor: 'rgba(119, 247, 231, 0)'
            }]
          }
        }
      }
    },
    mounted() {
      this.startDate = new Date(new Date(new Date() - 7 * 24 * 60 * 60 * 1000).format('yyyy-mm-dd')).format('yyyy-mm-dd');
      this.endDate = new Date().format('yyyy-mm-dd');

      this.switchVisitorsTrend();
    },
    methods: {
      getNewVisitorsTrend(scenicName) {
        let that = this;
        let _url = this.$api.getNewVisitorsTrend;
        let _param = {
          dataSource:'04',
          objType:'02',
          scenics:scenicName,
          start:this.startDate,
          end:this.endDate
        }

        this.$jquery.ajax({
          type: 'get',
          url:_url,
          dataType: 'json',
          data: _param,
          contentType:'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success:function (res) {
            if (res.retCode === 200) {
              let data = res.retData;
              that.tripModeConfig.option.x = data[scenicName].map(item => item.st_date);
              that.tripModeConfig.option.y[0].data = data[scenicName].map(item => item.entershopuv);
        
              that.$refs.tripMode.initChart();
            }
          }
        })
      },
      switchVisitorsTrend() {
        let entpName = ['大槐树寻根祭祖园','洪洞姑射山乾元山','洪洞历山风景区','广胜寺','洪洞关帝庙','山西洪洞红军八路军纪念馆']
        let index = 0;
        const MAX = entpName.length-1;
        
        this.getNewVisitorsTrend(entpName[index]);
        this.scenicName = entpName[index];
        this.interval = setInterval(() => {
          if (index >= MAX) {
            index = 0;
          } else {
            index++;
          }
          this.scenicName = entpName[index];
          this.getNewVisitorsTrend(entpName[index]);
        },15000)
      }
    },
    beforeDestroy() {
      clearInterval(this.interval);
    }
  }

</script>

<style scoped lang="scss" type="text/scss">
  .card-item {
    width: 100% !important;
    > .card-div {
      position: relative;
      height: 386px;
    }
  }

  .trip-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size:20px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:rgba(107,238,255,1);
  }
</style>
